<template>
	<view class="home">
		<!--轮播图-->
		<swiper indicator-dots circular>
			<!-- <swiper-item v-for="item in swipers" :key="item.id">
				<image :src="item.img"></image>
			</swiper-item> -->
			<swiper-item>
				<image src="../../static/swiper/banner-1.jpg"></image>
			</swiper-item>
			<swiper-item>
				<image src="../../static/swiper/banner-2.jpg"></image>
			</swiper-item>
			<swiper-item>
				<image src="../../static/swiper/banner-3.jpg"></image>
			</swiper-item>
		</swiper>
		<!--导航区域-->
		<view class="nav">
			<view class="nav_item" v-for="(item,index) in navs" :key='index' @click="navsItemClick(item.path)">
				<view>
					<image :src="item.img"></image>
				</view>
				<text>{{item.title}}</text>
			</view>
		</view>

		<!-- 推荐商品 -->
		<view class="hot_goods">
			<view class="tit">推荐商品</view>
			<goods-list :goods="goods" @goodsItemClick="goGoodsDetail"></goods-list>
		</view>
	</view>
</template>

<script>
	import goodsList from '../../components/goods-list/goods-list.vue'
	export default {
		data() {
			return {
				swipers: [],
				goods: [{
						image: '../../static/shangpin/huawei6.jpg',
						price: 2199,
						price_yuan: 2499,
						name: '华为荣耀 6plus'
					},
					{
						image: '../../static/shangpin/huawei6.jpg',
						price: 2199,
						price_yuan: 2499,
						name: '华为荣耀 6plus'
					},
					{
						image: '../../static/shangpin/huawei6.jpg',
						price: 2199,
						price_yuan: 2499,
						name: '华为荣耀 6plus'
					},
					{
						image: '../../static/shangpin/huawei6.jpg',
						price: 2199,
						price_yuan: 2499,
						name: '华为荣耀 6plus'
					}, {
						image: '../../static/shangpin/huawei6.jpg',
						price: 2199,
						price_yuan: 2499,
						name: '华为荣耀 6plus'
					}, {
						image: '../../static/shangpin/huawei6.jpg',
						price: 2199,
						price_yuan: 2499,
						name: '华为荣耀 6plus'
					}
				],
				navs: [{
						img: '../../static/font/shangpin.png',
						title: '尼玛超市',
						path: '/pages/goods/goods'
					},
					{
						img: '../../static/font/guanyu.png',
						title: '联系我们',
						path: '/pages/contact/contact'
					},
					{
						img: '../../static/font/tupian.png',
						title: '社区图片',
						path: '/pages/pics/pics'
					}, {
						img: '../../static/font/shipin.png',
						title: '学习视频',
						path: '/pages/videos/videos'
					}
				]
			}
		},
		onLoad() {
			//this.getSwipers();
			//this.goods();

		},
		//注册组件
		components: {
			"goods-list": goodsList
		},
		methods: {
			/* 获取轮播图数据 */
			async getSwipers() {
				console.log("轮播图")
				const res = await this.$myRequest({
					url: ''
				})
				this.swipers = res.data.message
			},
			/* 获取推荐商品数据 */
			async getHostGoods() {
				const res = await this.$myRequest({
					url: ''
				})
				this.goods = res.data.message;
			},

			/* 导航栏点击事件 */
			navsItemClick(path) {
				uni.navigateTo({
					url: path
				})
			},
			//导航到商品详情页
			goGoodsDetail(index) {
				console.log(index)
				uni.navigateTo({
					url: '/pages/goods-detail/goods-detail?id='+index
				})
			}

		}
	}
</script>

<style lang="scss">
	.home {
		swiper {
			width: 750rpx;
			height: 380rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.nav {
			display: flex;

			.nav_item {
				width: 25%;
				text-align: center;

				view {
					width: 120rpx;
					height: 120rpx;
					background-color: $shop-color;
					border-radius: 60rpx;
					margin: 10px auto;
					line-height: 150rpx;
					color: #FFFFFF;
					font-size: 50rpx;

					image {
						width: 60rpx;
						height: 60rpx;
					}
				}

				text {
					font-size: 30rpx;
				}
			}
		}

		.hot_goods {
			background-color: #eeeeee;
			overflow: hidden;
			margin-top: 10px;

			.tit {
				height: 50px;
				line-height: 50px;
				color: $shop-color;
				text-align: center;
				letter-spacing: 20px;
				background-color: #FFFFFF;
				margin: 7rpx 0;
			}
		}
	}
</style>
